import React from 'react';

interface ConfirmDialogProps {
  show: boolean;
  title?: string;
  message?: string;
  onConfirm: () => void;
  onCancel: () => void;
}

export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
  show,
  title = '确认操作',
  message,
  onConfirm,
  onCancel,
}) => {
  if (!show) {
    return null;
  }

  return (
    <div
      style={{
        backgroundColor: 'var(--copilot-kit-background-color, white)',
        border: '1px solid var(--copilot-kit-separator-color, #e1e5e9)',
        borderRadius: '12px',
        padding: '16px',
        boxShadow:
          'var(--copilot-kit-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06))',
        margin: '10px 0',
        minWidth: '300px',
        maxWidth: '500px',
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
      }}
    >
      <h3
        style={{
          margin: '0 0 12px 0',
          fontSize: '1rem',
          fontWeight: '500',
          color: 'var(--copilot-kit-primary-color, rgb(28, 28, 28))',
        }}
      >
        {title}
      </h3>
      <div
        style={{
          margin: '0 0 16px 0',
          fontSize: '0.875rem',
          color: 'var(--copilot-kit-secondary-contrast-color, rgb(28, 28, 28))',
          lineHeight: '1.5',
        }}
      >
        <p style={{ margin: 0, whiteSpace: 'pre-wrap' }}>{message || '您确定要执行此操作吗？'}</p>
      </div>
      <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
        <button
          onClick={onCancel}
          style={{
            padding: '8px 12px',
            border: '1px solid var(--copilot-kit-separator-color, #e1e5e9)',
            borderRadius: '8px',
            backgroundColor: 'var(--copilot-kit-background-color, white)',
            color: 'var(--copilot-kit-secondary-contrast-color, rgb(28, 28, 28))',
            cursor: 'pointer',
            fontSize: '0.875rem',
            fontWeight: '500',
            fontFamily: 'inherit',
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.backgroundColor =
              'var(--copilot-kit-input-background-color, #fbfbfb)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.backgroundColor = 'var(--copilot-kit-background-color, white)';
          }}
        >
          取消
        </button>
        <button
          onClick={onConfirm}
          style={{
            padding: '8px 12px',
            border: 'none',
            borderRadius: '8px',
            backgroundColor: 'var(--copilot-kit-primary-color, rgb(28, 28, 28))',
            color: 'var(--copilot-kit-contrast-color, white)',
            cursor: 'pointer',
            fontSize: '0.875rem',
            fontWeight: '500',
            fontFamily: 'inherit',
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'scale(1.02)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = 'scale(1)';
          }}
        >
          确认
        </button>
      </div>
    </div>
  );
};

export default ConfirmDialog;
